<template>
  <div
    v-if="item && item.list && item.list.length"
    :class="[
      'drawerTemplatePrice',
      `${props.isPrint ? 'drawerTemplatePrice-print' : ''}`
    ]"
  >
    <div
      v-if="item.priceList && item.priceList.length"
      class="drawerTemplatePrice-content-list-flex"
    >
    <div class="drawerTemplateData-view-item drawerTemplatePrice-content-list" v-for="(_lItem, lKey) in item.list.length > 1
        ? item.isBlock
          ? 1
          : 2
        : 1"
      :key="lKey">
      <div :class="['drawerTemplateData-view-item-w130',`${item.isBlock ? 'drawerTemplateData-view-item-flex1' : ''}`]"></div>
      <div
        v-for="(pItem, pKey) in item.priceList"
        :key="pKey"
        class="drawerTemplateData-view-item-text"
      >
        {{ getLabelFn(pItem) }}
      </div>
    </div>

    </div>

    <div
      v-else
      v-for="(_lItem, lKey) in item.list.length > 1
        ? item.isBlock
          ? 1
          : 2
        : 1"
      :key="lKey"
      class="drawerTemplateData-view-item"
    >
      <div class="drawerTemplateData-view-item-w120"></div>
      <div
        class="drawerTemplateData-view-item-text drawerTemplateData-view-item-text-reality"
      >
        {{ getLabelFn(item, 'reality') }}
      </div>
      <div
        v-if="item.list[0].list && item.list[0].list.length > 1"
        class="drawerTemplateData-view-item-text drawerTemplateData-view-item-text-setup"
      >
        {{ getLabelFn(item, 'setup') }}
      </div>
      <div class="drawerTemplateData-view-item-w120"></div>
    </div>
  </div>
</template>

<script lang="ts" setup name="DrawerTemplatePrice">
import { useMixins } from '@/hooks/useMixins';

type Props = {
  data?: any;
  isPrint?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  data: () => null,
  isPrint: () => false
});

const { getPageLangValueFn, language } = useMixins();

const item: any = ref(null);

const setDataFn = (obj = null) => {
  item.value = obj;
};

const { data = null } = props;

if (data) {
  setDataFn(data);
}

const getLabelFn = (item, type?) => {
  if (item) {
    if (type) {
      return language.value === 'zh'
        ? item[`${type}LabelZh`] ||
            item[`${type}LabelEn`] || item[`${type}LabelRu`] ||
            getPageLangValueFn(`table.${type}`,'common') ||
            ''
        : language.value === 'ru'
        ? item[`${type}LabelRu`] ||
            item[`${type}LabelEn`] || item[`${type}LabelZh`] ||
            getPageLangValueFn(`table.${type}`,'common') ||
            '' : item[`${type}LabelEn`] ||
            item[`${type}LabelZh`] || item[`${type}LabelRu`] ||
            getPageLangValueFn(`table.${type}`,'common') ||
            '';
    } else {
      return language.value === 'zh'
        ? item[`labelZh`] || item[`labelEn`] || item[`${type}LabelRu`] || '': language.value === 'ru'? item[`${type}LabelRu`] || item[`${type}LabelZh`] || item[`${type}LabelEn`]
        : item[`labelEn`] || item[`labelZh`] || item[`${type}LabelRu`] || '';
    }
  }

  return '-';
};

defineExpose({ setDataFn });
</script>

<style lang="less" scoped>
.drawerTemplatePrice {
  display: flex;
  margin: 0px 20px;
  // padding: 0 20px 0 20px;
  &.drawerTemplatePrice-print {
    background-color: rgb(241, 242, 243);
    font-size: 18px;
    border: 1px solid rgb(241, 242, 243);
    padding: 0 20px 0 81px;

    .drawerTemplateData-view-item-w120 {
      width: 100px;
    }

    .drawerTemplateData-view-item-w60 {
      width: 81px;
    }

    .drawerTemplateData-view-item-text-reality {
      width: 100px;
    }

    .drawerTemplateData-view-item-text-setup {
      width: 100px;
    }
  }

  .drawerTemplatePrice-content-list-flex{
    display: flex;
    width: 100%;

    .drawerTemplatePrice-content-list{
      padding-left: 0;
    }

    .drawerTemplateData-view-item-w130{
      width: 100px;
    }
    .drawerTemplateData-view-item-flex1{
      flex:1
    }
  }

  .drawerTemplatePrice-content-list{
    padding-left: 112px;
    .drawerTemplateData-view-item-text{
      width: 100px;
      margin-right: 12px;
    }
  }
}
</style>
